<template>
  	<div class="div">
		<div class="top">
			<PageTitle title="加盟商订单列表"></PageTitle>
			<el-button type="primary" @click="download">订单导出</el-button>
		</div>
    	<el-row :gutter="10">
      		<el-col :span="12">
        		<dl class="select-bar">
          			<dt>筛选:</dt>
					<dd :class="{ current: status == '' }" @click="handleClick('')">全部</dd>
					<dd :class="{ current: status == '1' }" @click="handleClick('1')">待付款</dd>
					<dd :class="{ current: status == '2' }" @click="handleClick('2')">待发货</dd>
					<dd :class="{ current: status == '6' }" @click="handleClick('6')">待收货</dd>
					<dd :class="{ current: status == '4' }" @click="handleClick('4')">已完成</dd>
					<dd :class="{ current: status == '5' }" @click="handleClick('5')">退货申请中</dd>
       	 		</dl>
      		</el-col>
      		<el-col :span="6">
				<el-input placeholder="输入订单号搜索" v-model="search" @keypress.enter.native="handleSearch">
					<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
				</el-input>
      		</el-col>
			<el-col :span="6">
				<DatePicker @dateChange="dateChange" />
			</el-col>
    	</el-row>
		<el-table stripe :data="tableData">
      		<el-table-column prop="order_code" label="订单号"></el-table-column>
      		<el-table-column label="商品图片">
				<template slot-scope="scope">
					<img :src="scope.row.guageList[0].url" @click="handlePictureCardPreview(scope.row.guageList[0].url)" class="list-img">
				</template>
      		</el-table-column>
      		<el-table-column label="商品名称">
        		<template slot-scope="scope">
					<template v-if="scope.row.guageList.length > 1">
						{{ scope.row.guageList[0].name }} 等 {{ scope.row.guageList.length }} 种商品
					</template>
					<template v-else>
						{{ scope.row.guageList[0].name }}
					</template>
        		</template>
      		</el-table-column>
      		<el-table-column label="总价格">
				<template slot-scope="scope">
					￥{{ scope.row.subtotal }}
				</template>
      		</el-table-column>
      		<el-table-column label="状态">
        		<template slot-scope="scope">
					<template v-if="scope.row.payment_status == 1">
						<span class="color-info">待付款</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 2">
						<span class="color-danger">待发货</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 4">
						<span class="color-success">已完成</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 5">
						<span class="color-theme">退货申请中</span>
					</template>
					<template v-else-if="scope.row.shipping_status == 6">
						<span class="color-danger">待收货</span>
					</template>
        		</template>
      		</el-table-column>
      		<el-table-column label="操作">
				<template slot-scope="scope">
					<router-link :to="'/merchantOrderList/merchantOrderDetail/' + scope.row.order_code" class="el-button el-button--text">查看</router-link>
				</template>
      		</el-table-column>
    	</el-table>
    	<div class='pagination-wrapper'>
			<el-pagination
				layout="prev, pager, next"
				@current-change="pageChange"
				:page-size="pageSize"
				:total="totalCount"
				:current-page="pageNum"
			>
      		</el-pagination>
    	</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl">
		</el-dialog>
  	</div>
</template>

<script>
  	import PageTitle from '@/components/pageTitle/PageTitle.vue'
  	import DatePicker from '@/components/datePicker/DatePicker.vue'
  	export default {
    	name: 'OrderList',
		components: {
			PageTitle,
			DatePicker
		},
		activated() {
			this._getList()
		},
    	data() {
      		return {
				dialogImageUrl: '',
				dialogVisible: false,
				tableData: [],
				status: '',
				pageNum: 1,
				pageSize: 10,
				totalCount: 0,
				searchData: '',
				date: [],
				search: ''
      		}
    	},
    	computed: {
      		statusParams() {
        		let obj = {}
        		switch (this.status){
          			case '':
          			break
          			case '1':
            			obj.payment_status = 1
            		break
          			case '2':
						obj.payment_status = 2
						obj.shipping_status = 2
					break
          			case '4':
						obj.shipping_status = 4
					break
          			case '5':
						obj.shipping_status = 5
					break
					case '6':
						obj.shipping_status = 6
					break
        		}
        		return obj
      		}
    	},
    	methods: {
			//导出订单
			download(){
				window.location.href=`http://admin.youjingxi.net.cn/v1/goods/execel?token=${localStorage.getItem('token')}&start_time=${this.date[0]}&size=10&end_time=${this.date[1]}`
			},
      		async _getList() {
        		let { data: { code, data } } = await this.$axios({
          			url: this.$api + '/v1/merchant/porder',
          			method: 'GET',
					params: {
						size: this.pageSize,
						page: this.pageNum,
						...this.statusParams,
						starttime: this.date[0],
						endtime: this.date[1],
						order_code: this.search
					}
				})
        		if(code === 0) {
          			if(data.items) {
						this.tableData = data.subtotal.map((item, index) => {
							item.guageList = data.items[index]
							return item
						})
            			this.totalCount = Number(data.page.totalCount)
					} else {
						this.tableData = []
					}
        		}
      		},
      		handleClick(s) {
				this.status = s
				this.pageNum = 1
				this.$nextTick(() => {
					this._getList()
				})
      		},
			handleSearch() {
				this.pageNum = 1
				this._getList()
			},
			pageChange(pageNum) {
				this.pageNum = pageNum,
				this._getList()
			},
			dateChange(date) {
				this.date = date
				this.pageNum = 1
				this._getList()
			},
			handlePictureCardPreview(src) {
				this.dialogImageUrl = src;
				this.dialogVisible = true;
			}
    	}
  	}
</script>

<style lang="scss" scoped>
  	@import '@/assets/css/select-bar.scss';
  	.list-img {
     	width:80%;
     	height:60px;
     	cursor: pointer;
  	}
  	.el-button--text {
    	text-decoration: none;
  	}
	.top{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.title{
			width: calc(100% - 150px);
		}
		button{
			width: 100px;
			line-height: 40px;
			height: 40px;
			padding: 0;
		}
	}
</style>
